<template>
  <div>
    <el-button type="primary" @click="newUserFlag = true"  style="margin-bottom: 25px">新建用户</el-button>
    <el-dialog title="新建用户" :visible.sync="newUserFlag" width="50%">
      <el-row>
        <el-col :span="24">
          <h3>登录账号：</h3>
        </el-col>
        <el-col :span="24">
          <el-input v-model="newUser.loginName" placeholder="请输入内容" style="width: 300px"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <h3>真实姓名：</h3>
        </el-col>
        <el-col :span="24">
          <el-input v-model="newUser.nickName" placeholder="请输入内容" style="width: 300px"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <h3>手机号码：</h3>
        </el-col>
        <el-col :span="24">
          <el-input v-model="newUser.mobile" placeholder="请输入内容" style="width: 300px"></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <h3>邮箱地址：</h3>
        </el-col>
        <el-col :span="24">
          <el-input v-model="newUser.email" placeholder="请输入内容" style="width: 300px"></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button @click="newUserFlag = false">取 消</el-button>
        <el-button type="primary" @click="haveNewUser">注 册</el-button>
      </span>
    </el-dialog>

    <el-table :row-style="rowStyle" :data="tableData" border>
      <el-table-column prop="loginName" label="登录账号"></el-table-column>
      <el-table-column prop="nickName" label="真实姓名"></el-table-column>
      <el-table-column prop="mobile" label="手机号码"></el-table-column>
      <el-table-column prop="email" label="邮箱地址"></el-table-column>
      <el-table-column label="操作" width="320">
        <template slot-scope="scope">
          <el-button @click="pzUser(scope.row)" type="primary" size="small">配置角色</el-button>
          <el-button @click="handleClick(scope.row)" type="warning" size="small">重置密码</el-button>
          <el-button @click="delUser(scope.row)" type="danger" size="small">删除用户</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="1"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="page.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      style="float: right;margin: 20px 50px;"
      :total="page.tatol"
    ></el-pagination>

    <el-dialog title="配置角色" :visible.sync="routeFlag" width="30%">
      <el-select v-model="routeItem" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.roleName"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-plus" @click="pushChange">添加</el-button>
      <ul>
        <li style="width: 50%;" v-for="(item, index) in routeList" :key="index">
          {{item}}
          <span @click="delItem(index)" style="cursor: pointer;float:right;color:red;">删除</span>
        </li>
      </ul>
      <span slot="footer" class="dialog-footer">
        <el-button @click="routeFlag = false">取 消</el-button>
        <el-button type="primary" @click="getNewRote">配 置</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import { Message } from 'element-ui'
export default {
  data () {
    return {
      newUserFlag: false,
      newUser: {
        loginName: '',
        nickName: '',
        mobile: '',
        email: ''
      },
      tableData: [],
      page: {
        pageSize: 10,
        pageNo: 1,
        tatol: 0
      },
      pzUserMsg: {
        userId: '',
        roleIdList: []
      },
      routeFlag: false,
      options: [],
      routeList: [],
      routeItem: ''
    }
  },
  methods: {
    handleSizeChange (val) {
      this.page.pageSize = val
      this.search()
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.search()
    },
    haveNewUser () {
      request({
        url: '/admin/user/addUserInfo',
        method: 'post',
        data: this.newUser
      }).then(res => {
        // console.log(res)
        if (res.code === '00000000') {
          alert('账号：' + this.newUser.loginName + '\n密码：' + res.data)
          this.newUserFlag = false
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    search () {
      request({
        url: '/admin/user/findUserInfoPage',
        method: 'get',
        params: {
          pageNo: this.page.pageNo,
          pageSize: this.page.pageSize,
          isDelete: 0
        }
      }).then(res => {
        if (res.code === '00000000') {
          this.tableData = res.data.data
          this.page.tatol = parseInt(res.data.totalCount)
        }
      })
    },
    rowStyle (row) {
      // console.log(row)
      if (row.rowIndex % 2 === 0) {
        return 'background: #ccc'
      }
    },
    handleClick (row) {
      request({
        url: '/admin/user/refreshUserPassWord',
        method: 'get',
        params: {
          loginName: row.loginName
        }
      }).then(res => {
        if (res.code === '00000000') {
          alert('账号：' + row.loginName + '密码：' + res.data)
        }
      })
    },
    pzUser (row) {
      this.pzUserMsg.userId = row.id
      // console.log(row)
      request({
        url: '/admin/role/findRoleByUserId',
        method: 'get',
        params: {
          userId: row.id
        }
      }).then(res => {
        if (res.code === '00000000') {
          for (let i = 0; i < res.data.length; i++) {
            this.pzUserMsg.roleIdList.push(res.data[i].id)
          }
          for (let j = 0; j < this.pzUserMsg.roleIdList.length; j++) {
            for (let k = 0; k < this.options.length; k++) {
              if (this.pzUserMsg.roleIdList[j] === this.options[k].id) {
                this.routeList.push(this.options[k].roleName)
              }
            }
          }
          console.log(this.routeList)
          this.routeFlag = true
        }
      })
    },
    getNewRote () {
      request({
        url: '/admin/role/addUserRole',
        method: 'post',
        data: this.pzUserMsg
      }).then(res => {
        if (res.code === '00000000') {
          Message({
            message: res.message,
            type: 'success',
            duration: 5 * 1000
          })
          this.routeFlag = false
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    },
    delItem (index) {
      this.routeList.splice(index, 1)
      this.pzUserMsg.roleIdList.splice(index, 1)
    },
    pushChange () {
      if (!this.routeItem) {
        Message({
          message: '不能添加空！',
          type: 'error',
          duration: 5 * 1000
        })
        return
      }
      for (let j = 0; j < this.pzUserMsg.roleIdList.length; j++) {
        if (this.routeItem === this.pzUserMsg.roleIdList[j]) {
          Message({
            message: '已存在！',
            type: 'error',
            duration: 5 * 1000
          })
          return
        }
      }
      for (let i = 0; i < this.options.length; i++) {
        if (this.routeItem === this.options[i].id) {
          this.routeList.push(this.options[i].roleName)
        }
      }
      this.pzUserMsg.roleIdList.push(this.routeItem)
      this.routeItem = ''
    },
    delUser (row) {
      request({
        url: '/admin/user/updateAdminUserInfoState',
        method: 'get',
        params: {
          // userId: row.id
          loginName: row.loginName,
          isDelete: 1
        }
      }).then(res => {
        if (res.code === '00000000') {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
          this.search()
        } else {
          Message({
            message: res.message,
            type: 'error',
            duration: 5 * 1000
          })
        }
      })
    }
  },
  watch: {
    newUserFlag (val) {
      if (!val) {
        this.loginName = this.newUser.loginName
        this.newUser = {
          loginName: '',
          nickName: '',
          mobile: '',
          email: ''
        }
      }
    },
    routeFlag (val) {
      if (!val) {
        this.routeList = []
        this.pzUserMsg = {
          userId: '',
          roleIdList: []
        }
        this.routeItem = ''
      }
    }
  },
  created () {
    this.search()
    request({
      url: '/admin/role/findRoleByPage',
      method: 'get',
      params: {
        pageNo: this.page.pageNo
      }
    }).then(res => {
      if (res.code === '00000000') {
        this.options = res.data.data
      } else {
        Message({
          message: res.message,
          type: 'error',
          duration: 5 * 1000
        })
      }
    })
  }
}
</script>

<style>
.el-dialog__footer {
  text-align: center;
}
</style>
